<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>WebUI - Serve a Folder Example (C)</title>
		<style>
			body {
				font-family: 'Arial', sans-serif;
				color: white;
				background: linear-gradient(to right, #507d91, #1c596f, #022737);
				text-align: center;
				font-size: 18px;
			}
			button,
			input {
				padding: 10px;
				border-radius: 3px;
				border: 1px solid #ccc;
				box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
				transition: 0.2s;
			}
			button {
				background: #3498db;
				color: #fff;
				cursor: pointer;
				font-size: 16px;
			}
			h1 {
				text-shadow: -7px 10px 7px rgb(67 57 57 / 76%);
			}
			button:hover {
				background: #c9913d;
			}
			input:focus {
				outline: none;
				border-color: #3498db;
			}

			a:link {
				color: #fd5723;
			}
			a:active {
				color: #fd5723;
			}
			a:visited {
				color: #fd5723;
			}
			a:hover {
				color: #f0bcac;
			}
		</style>
	</head>
	<body>
		<h3 id="title">Serve a Folder Example (C)</h3>
		<br />
		<p id="description">
			You can edit this HTML file as you need.<br />
			Also, you can config WebUI to use Deno or Nodejs runtime for your JS/TS files.<br />
			<br />
			Please click on the link to switch to the second page<br />
			Or click on the button to switch to the second page programmatically.
		</p>
		<br />
		Click on [deno_test.ts] to interpret the TypeScript file (If deno is installed)
		<br />
		By a simple HTTP request "deno_test.ts?foo=60&bar=40"
		<br />
		<br />
		<button OnClick="call_deno_file();">Deno_test.ts (Local file)</button>
		<br />
		<br />
		<button OnClick="call_bun_file();">Bun_test.ts (Local file)</button>
		<br />
		<br />
		<button OnClick="call_nodejs_file();">Nodejs_test.ts (Local file)</button>
		<br />
		<h4><a href="second.html">Second Page As A Simple Link (Local file)</a></h4>
		<br />
		<button id="SwitchToSecondPage">Switch to The Second Page Programmatically (Local file)</button>
		<br />
		<br />
		<button id="OpenNewWindow">Open The Second Window (Local file)</button>
		<br />
		<h4><a href="test.txt">Static file example (Embedded)</a></h4>
		<h4><a href="dynamic.html">Dynamic file example (Embedded)</a></h4>
		<p>
			Unicode Test:<br /><br />
			مرحبًا<br /> <!-- Arabic -->
			你好<br /> <!-- Chinese -->
			こんにちは <!-- Japanese -->
		</p>
	</body>

	<!-- Connect this window to the background app -->
	<script src="/webui.js"></script>

	<script>

		function call_deno_file() {
			// Note:
			// You need to set Deno as default runtime in the backend
			// Simple HTTP Request
			var xmlHttp = new XMLHttpRequest();
			xmlHttp.open('GET', 'deno_test.ts?foo=123&bar=456', false);
			xmlHttp.send(null);
			alert(xmlHttp.responseText);
		}

		function call_bun_file() {
			// Note:
			// You need to set Bun as default runtime in the backend
			// Simple HTTP Request
			var xmlHttp = new XMLHttpRequest();
			xmlHttp.open('GET', 'bun_test.ts?foo=123&bar=456', false);
			xmlHttp.send(null);
			alert(xmlHttp.responseText);
		}

		function call_nodejs_file() {
			// Note:
			// You need to set Nodejs as default runtime in the backend
			// Simple HTTP Request
			var xmlHttp = new XMLHttpRequest();
			xmlHttp.open('GET', 'node_test.js?foo=123&bar=456', false);
			xmlHttp.send(null);
			alert(xmlHttp.responseText);
		}

		// JavaScript Example
		/*
		document.addEventListener('DOMContentLoaded', function() {
			// DOM is loaded. Check if `webui` object is available
			if (typeof webui !== 'undefined') {
				// Set events callback
				webui.setEventCallback((e) => {
					if (e == webui.event.CONNECTED) {
						// Connection to the backend is established
						console.log('Connected.');
						webuiTest();
					} else if (e == webui.event.DISCONNECTED) {
						// Connection to the backend is lost
						console.log('Disconnected.');
					}
				});
			} else {
				// The virtual file `webui.js` is not included
				alert('Please add webui.js to your HTML.');
			}
		});

		function webuiTest() {
			// Call a backend function
			if (webui.isConnected()) {

				// When you bind a func in the backend
				// webui will create the `func` object
				// in three places:
				//
				// Global   : func(...)
				// Property : webui.func(...)
				// Method   : webui.call('func', ...)
				//
				// [!] Note: Objects creation fails when
				// a similar object already exist.

				const foo = 'Hello';
				const bar = 123456;

				// Calling as global object
				myBackendFunction(foo, bar).then((response) => {
					// Do something with `response`
				});
				
				// Calling as property of `webui.` object
				webui.myBackendFunction(foo, bar).then((response) => {
					// Do something with `response`
				});
				
				// Calling using the method `webui.call()`
				webui.call('myBackendFunction', foo, bar).then((response) => {
					// Do something with `response`
				});
				
				// Using await
				// const response = await myBackendFunction(foo, bar);
				// const response = await webui.myBackendFunction(foo, bar);
				// const response = await webui.call('myBackendFunction', foo, bar);
			}
		}
		*/

	</script>
</html>
